<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>折叠插件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin: 100px;">
<!-- 
	1.基本
		1)	.well 						//对内容添加
		2)	.collapse 					//对内容的容器添加。隐藏功能
		3)	data-toggle="collapse"		//对btn添加。切换功能
		4) 	data-target="目标容器" 		//对btn添加。指定功能

		JS方法：不用data-toggle和data-target
			$('button').on('click', function () {
				$('#content').collapse('toggle')
			})

	2.手风琴折叠(添加位置如排列形式)
		1)	.panel-group 							//对最外层容器添加
			2)	.panel 								//对第二层容器添加
			3)	.panal-default						//对第二层容器添加。样式
				4) 	.panal-heading 		 			//对标题h4的外层容器添加
					5)	.panel-title 				//对标题h4添加
				6)	.panel-collapse 				//对内容的容器添加
					7)	.panel-body 				//对内容添加
		8)	.collapse 								//对内容的容器添加。一开始隐藏
		9)	.in 						//对内容的容器添加。一开始展开(默认)，如果一开始要展开且能正常切换，还要加.collapse
		10)	href="内容id名称"						//对a添加。同时给内容添加id
		11)	data-toggle="collapse" 					//对a添加。展开隐藏切换
		*)	针对第10和第11点,也可以让触发的对象改为整条标题栏而不是a标签内的几个字(做法参照下面 Test手风琴折叠 第一个标题，添加data-target和data-toggle)

		最终效果：(始终只有一个展开)
		1)	data-parent="id名称"					//对每一个a添加。同时给最外层容器添加这个di，一般取名accordion
			JS写法:
				$('#collapseOne,#collapseTwo,#collapseThree,#collapseFour').collapse({ 	//只有一个分号，不是每个id都有一个分号
					parent : '#accordion'
					toggle : false,
				})
	
	3.事件类型
		1)	show.bs.collapse 						//展开之前触发。同时还有shown,hide,hidden
 -->


	<!-- 基本 -->
	<button class="btn btn-info" data-toggle="collapse" data-target="#content">Bootstrap</button>
	<div id="content" class="collapse">
		<div class="well">Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。</div>
	</div>

	<!-- Test基本 -->
	<button id="testBtn" class="btn btn-info btn-block">Test</button>
	<div id="testContent" class="collapse">
		<div class="well">Test内容</div>
	</div>

	<!-- 手风琴折叠 -->
	<div class="panel-group" id="accordion"> 				<!-- 一般id名称取accordion -->
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">第一部分标题</a> 			<!-- 这里要指定目标id -->
				</h4>
			</div>
			<div id="collapseOne" class="panel-collapse collapse in"> 							<!-- 这里添加目标id -->
				<div class="panel-body">
					第一部分内容
				</div>
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">第二部分标题</a> 			<!-- 这里要指定目标id -->
				</h4>
			</div>
			<div id="collapseTwo" class="panel-collapse collapse"> 							<!-- 这里添加目标id -->
				<div class="panel-body">
					第二部分内容
				</div>
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">第三部分标题</a> 			<!-- 这里要指定目标id -->
				</h4>
			</div>
			<div id="collapseThree" class="panel-collapse collapse"> 							<!-- 这里添加目标id -->
				<div class="panel-body">
					第三部分内容
				</div>
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">第四部分标题</a> 			<!-- 这里要指定目标id -->
				</h4>
			</div>
			<div id="collapseFour" class="panel-collapse collapse"> 							<!-- 这里添加目标id -->
				<div class="panel-body">
					第四部分内容
				</div>
			</div>
		</div>
	</div>

	<!-- Test手风琴折叠 -->
		<div class="panel-group" id="test">
			<div class="panel panel-default">
				<div class="panel-heading" data-target="#test1" data-toggle="collapse">
					<h4 class="panel-title">
						<a href="#">Test1</a>
					</h4>
				</div>
				<div id="test1" class="panel-collapse collapse">
					<div class="panel-body">
						第一部分内容
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a href="#test2" data-toggle="collapse" data-parent="#test">Test2</a> 			<!-- 这里要指定目标id -->
					</h4>
				</div>
				<div id="test2" class="panel-collapse collapse"> 							<!-- 这里添加目标id -->
					<div class="panel-body">
						第二部分内容
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a href="#test3" data-toggle="collapse" data-parent="#test">Test3</a> 			<!-- 这里要指定目标id -->
					</h4>
				</div>
				<div id="test3" class="panel-collapse collapse"> 							<!-- 这里添加目标id -->
					<div class="panel-body">
						第三部分内容
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a href="#test4" data-toggle="collapse" data-parent="#test">Test4</a>
					</h4>
				</div>
				<div id="test4" class="panel-collapse collapse">
					<div class="panel-body">
						第四部分内容
					</div>
				</div>
			</div>
		</div>

	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
	<script>
		// Test基本
		$('#testBtn').on('click', function () {
			$('#testContent').collapse('toggle'); 			//可完成显示隐藏

			/*$('#testContent').collapse({
				toggle : true								//只可显示无法隐藏
			});*/

			// $('#testContent').collapse('show');			//只可显示无法隐藏
		})

		//Test手风琴。最终效果的JS写法(即不用data-parent)
		$('#collapseOne,#collapseTwo,#collapseThree,#collapseFour').collapse({
			parent : '#test',
			toggle : false
		})

		// 事件类型
		$('#testContent').on('hidden.bs.collapse', function () {
			alert('关闭之后触发')
		})

	</script>
</body>
</html>